<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>性能测试</title>
  <style>
    table{
      border: 1px solid gray;
      border-collapse: collapse;
      width: 100%;
      & th,td{
        border: 1px solid gray;
      }
    }
  </style>
 <script src="twin-node.js"></script>
</head>
<body>
  <div>
    <label>测试数据总行数：<input id="count" type="text" value="1000" /></label>
    <button id="botton1">TwinNode渲染</button>
    <button id="botton2">原生渲染</button>
  </div>
  <div id="message" style="color: red;padding: 10px;font-size: 20px;"></div>
  <div id="container"></div>
  <script>
    
    D$("#botton1").Click(()=>{
      let container = D$("#container");
      let message = D$("#message");
      let count = parseInt(D$("#count").value());
      let t1 = new Date();
      const {table,tr,th,td} = TwinNode.tags;
      let node = table(
        tr(
          th("TwinNode渲染").attr("colspan",3)
        ),
        ()=>{
          let trs = [];
          for(let i=0;i<count;i++){
            trs.push(
              tr(
                td(i),td(i),td(i)
              )
            )
          }
          return trs;
        }
      )
      node.render(container);
      //等渲染完再计算结束时间
      setTimeout(() => {
        let t2 = new Date();
        message.html(`共渲染${count}个tr,${count*3}个td,总用时${t2-t1}毫秒`);
      },0);
      
    });
    
    D$("#botton2").Click(()=>{
      let container = document.getElementById("container")
      let message = document.getElementById("message")
      let count = parseInt(document.getElementById("count").value);
      let t1 = new Date();
      let html = "<table><tr><th colspan='3'>原生渲染</th></tr>";
      for(let i=0;i<count;i++){
        html+=`<tr><td>${i}</td><td>${i}</td><td>${i}</td></tr>`;
      }
      html+="</table>";
      container.innerHTML = html;
      //等渲染完再计算结束时间
      setTimeout(() => {
        let t2 = new Date();
        message.innerHTML=`共渲染${count}个tr,${count*3}个td,总用时${t2-t1}毫秒`;
      },0);
    });

  </script>
</body>
</html>